<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/css/global.css" media="all">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/table.css"/>
    <style type="text/css">
        .searcheBottom{margin-bottom: 10px;}
    </style>
    <title>hbase表清单</title>
</head>
<body>
<div class="admin-main">
    <div style="margin: 15px;">
            <blockquote class="layui-elem-quote">
                <div class="demoTable">
                    <div class="layui-inline searcheBottom">
                        英文表名：
                        <div class="layui-inline">
                            <input id="tableNameEn" class="layui-input" name="tableNameEn" autocomplete="off" placeholder="英文表名"/>
                        </div>
                    </div>
                    <div class="layui-inline searcheBottom">
                        中文表名：
                        <div class="layui-inline">
                            <input id="tableNameCn" class="layui-input" name="tableNameCn" autocomplete="off" placeholder="中文表名"/>
                        </div>
                    </div>
                    <div class="layui-inline searcheBottom">
                        <button class="layui-btn" data-type="reload" id="search" lay-submit lay-filter="save">搜索</button>
                        <a class="layui-btn layui-btn-primary" id="reset">重置</a>
                        <a data-opt="add" href="/manage/data/addTable" class="layui-btn"><i class="layui-icon">&#xe608;</i>添加表名</a>
                        <a href="/manage/data/dataPage" class="layui-btn">返回</a>
                    </div>
                </div>
            </blockquote>
            <span style="font-size: 16px;"><b>hbase表名列表</b></span>
            <table class="layui-hide" id="hbasetable" lay-filter="tableFilter"></table>
    </div>
    <script type="text/javascript" src="/plugins/layui/layui.js"></script>
    <script>
        layui.use(['jquery','table','laydate','layer','form','util'],function() {
            var $ = layui.jquery, table = layui.table, laydate = layui.laydate,
                layer = layui.layer, form = layui.form, util = layui.util;

            pageInit();
            function pageInit() {
                table.render({
                    elem: "#hbasetable",
                    url: "/manage/data/htablelist",
                    method: "post",
                    cols: [[
                        {field: 'id', title: 'ID', sort: true, align: 'center',},
                        {field: 'tableNameEn', title: '英文表名', align: 'left'},
                        {field: 'tableNameCn', title: '中文表名', align: 'left'},
                        {field: 'rowkeyHint', title: '查询提示', align: 'left'},
                        {
                            field: 'tool', title: "操作", align: 'center',
                            templet: function (d) {
                                var tool = '<a href="#" class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>';
                                tool += '<a href="#" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                                return tool;
                            }
                        }
                    ]],
                    limits: [10, 15, 20, 25, 30],
                    limit: 10,
                    page: true
                });
            }

            //表格重载
            var active = {
                reload: function () {
                    var tableNameEn = $('#tableNameEn');
                    var tableNameCn = $('#tableNameCn');
                    table.reload('hbasetable', {
                        where: {
                            tableNameEn: tableNameEn.val(),
                            tableNameCn:tableNameCn.val(),
                        }
                    });
                }
            };

            $('#reset').on('click', function(){
                $("#tableNameEn").val('');
                $("#tableNameCn").val('');
            });

            //将搜索框的值随请求传到后台
            $('#search').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            $(".layui-input").keydown(function (e) {
                if(e.keyCode == 13){
                    $('#search').click();
                }
            });

            table.on('tool(tableFilter)', function(obj){
                var data = obj.data;
                if (obj.event == "del") {
                    layer.confirm('确定提交么？', { title:'提示'},function (index) {
                        $.ajax({
                            url:"/manage/data/delTabName",
                            type:"post",
                            dataType:"json",
                            data:{"id":data.id},
                            success:function(count){
                                layer.close(index);
                                pageInit();
                            }
                        })
                    })
                } else if (obj.event == "edit") {
                    location.href='/manage/data/editName?id='+data.id+'';
                }
            });
        });
    </script>
</div>
</body>
</html>